<template>	
	<up-navbar title="首页" :placeholder="true">
		<template #left>
			<image src="/static/logo.png" mode="heightFix" style="height: 70rpx;"></image>
		</template>
	</up-navbar>
	
	<view class="u-swiper">
		<up-swiper circular :list="carouselImages" :height="150"></up-swiper>
	</view>
	
	<view class="hotRecommend">
		<view class="fontStyle">热门推荐</view>
		<up-scroll-list :indicator='false'>
			<view class="recommendList" v-for="(item, index) in recommendList" :key="index"  @click.stop="detailClick(item)">
				<image mode="heightFix" :src="item.imageUrl"></image>
				<view>{{item.name}}</view>
				<view style="color: red;">成人: ¥{{item.adultPrice}}</view>
			</view>
		</up-scroll-list>
	</view>
	
	<view class="boutique">
		<view class="fontStyle">精品推荐</view>
		<up-waterfall v-model="recommendList">
			<template v-slot:left="{leftList}">
				<view class="left" v-for="(item, index) in leftList" :key="index">
					<view @click.stop="detailClick(item)" class="item">
						<image mode="widthFix" :src="item.imageUrl"></image>
						<view>{{item.name}}</view>
						<view style="color: red;">成人: ¥{{item.adultPrice}}</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="right" v-for="(item, index) in rightList" :key="index" >
					<view @click.stop="detailClick(item)" class="item">
						<image mode="widthFix" :src="item.imageUrl"></image>
						<view>{{item.name}}</view>
						<view style="color: red;">¥{{item.adultPrice}}</view>
					</view>
				</view>
			</template>
		</up-waterfall>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app' 
	import { getRecommend, getCarouselImages } from '@/api/recommend.js';

	const list = ref([]);
	const recommendList = ref([]);
	const carouselImages = ref([]);
	
	onShow(async (options) => {
		const recommend = await getRecommend();
		recommendList.value = recommend.data.records || [];
		
		const img = await getCarouselImages();
		carouselImages.value = img.data.map(item => item.imageUrl);
	});
	
	function detailClick(item){ 
		uni.navigateTo({
			url:`/pages/index/detail/index?id=${item.id}`
		})
	}
</script>

<style>
	
.hotRecommend{
	margin: 15rpx auto 50rpx auto;
	width: 98vw;
	
}
.boutique{
	margin: 15rpx auto 50rpx auto;
	width: 96vw;
}
.recommendList image{
	height: 350rpx;
	border-radius: 15rpx;
	margin: 15rpx 10rpx 10rpx 0;
	
}
.item{
	width: 97%;
	margin: 15rpx 0;
}
.item image{
	display: block;
	margin: 0 auto;
	width: inherit;
	border-radius: 15rpx;
		/* margin: 15rpx 20rpx 10rpx 0; */
}
.fontStyle{
	font-weight: bold;
	font-size: 1.2rem;
	margin: 30rpx 0;
}

.left, .right{
	display: flex;
}
.left{
	justify-content: flex-start;
}
.right{
	justify-content: flex-end;
}

</style>